<template>
  <div class="agentOrder">
    <el-button v-no-more-click:3000 class="mb10 fl" @click="addOrder">+添加订单</el-button>
    <el-popover placement="left" trigger="click">
      <template>
        <div><el-checkbox v-model="tableHeader.checked" @change="selectAll">全选</el-checkbox></div>
        <div><el-checkbox v-model="tableHeader.checked1">订单编号</el-checkbox></div>
        <div><el-checkbox v-model="tableHeader.checked2">订单状态</el-checkbox></div>
        <div><el-checkbox v-model="tableHeader.checked3">专利类型</el-checkbox></div>
        <div><el-checkbox v-model="tableHeader.checked4">专利名称</el-checkbox></div>
        <div><el-checkbox v-model="tableHeader.checked5">专利权人</el-checkbox></div>
        <div><el-checkbox v-model="tableHeader.checked6">发明人</el-checkbox></div>
        <div><el-checkbox v-model="tableHeader.checked7">联络人</el-checkbox></div>
        <div><el-checkbox v-model="tableHeader.checked8">联络人电话</el-checkbox></div>
        <div><el-checkbox v-model="tableHeader.checked9">联络人邮箱</el-checkbox></div>
        <div><el-checkbox v-model="tableHeader.checked10">内容审核文件</el-checkbox></div>
        <div><el-checkbox v-model="tableHeader.checked11">创建时间</el-checkbox></div>
        <div><el-checkbox v-model="tableHeader.checked12">更新时间</el-checkbox></div>
      </template>
      <el-button style="float: right;margin-bottom: 5px;margin-top: 0;" slot="reference" icon="el-icon-arrow-down">显示字段</el-button>
    </el-popover>

    <!-- 列表查找 -->
    <div class="search-wrap">
      <table-search
          ref="table-search"
          :selectHead="selectHead"
          @searchMethods="searchMethods">
      </table-search>
    </div>

    <el-table
      ref="tableRef"
      :data="tableData"
      border
      style="width: 100%"
      v-loading="loading"
      @sort-change='tableSortChange'
      @row-click="lookOrder"
      height="88%">
      <el-table-column show-overflow-tooltip label="ID" width="60" align="center">
        <template slot-scope="scope">{{(scope.$index+1)+(currentPage-1)*tableSize }}</template>
      </el-table-column>
      <el-table-column v-if="tableHeader.checked1" show-overflow-tooltip label="订单编号" align="center" prop='order_number' sortable='custom' width="200"></el-table-column>
      <el-table-column v-if="tableHeader.checked2" show-overflow-tooltip label="订单状态" align="center" prop='status' sortable='custom' width="120"></el-table-column>
      <el-table-column v-if="tableHeader.checked3" show-overflow-tooltip label="专利类型" align="left" prop='type' sortable='custom' width="120"></el-table-column>
      <el-table-column v-if="tableHeader.checked4" show-overflow-tooltip label="专利名称" align="left" prop='patent_name' sortable='custom' width="120"></el-table-column>
      <el-table-column v-if="tableHeader.checked5" show-overflow-tooltip label="专利权人" align="left" prop='patent_user' sortable='custom' width="120"></el-table-column>
      <el-table-column v-if="tableHeader.checked6" show-overflow-tooltip label="发明人" align="left" prop='user_name' sortable='custom' width="120"></el-table-column>
      <el-table-column v-if="tableHeader.checked7" show-overflow-tooltip label="联络人" align="center" prop='liaisons' sortable='custom' width="120"></el-table-column>
      <el-table-column v-if="tableHeader.checked8" show-overflow-tooltip label="联络人电话" align="center" prop='liaisons_tel' sortable='custom' width="140"></el-table-column>
      <el-table-column v-if="tableHeader.checked9" show-overflow-tooltip label="联络人邮箱" align="left" prop='liaisons_email' sortable='custom' width="140"></el-table-column>
      <el-table-column v-if="tableHeader.checked10" prop="review_file" label="内容审核文件" width="200" align="center">
				<template slot-scope="scope">
					<div>
						<a
              v-for="item in scope.row.reviewfileArr"
              :key="item.id"
              :href="baseUrl + '/api/download?path=' + item.file +'/'+ item.path"
              :download="item.path"
              :title="item.path"
              class="el-icon-tickets file_sh"
              @click.stop="stopLook">
            </a>
					</div>
				</template>
			</el-table-column>
      <el-table-column v-if="tableHeader.checked11" show-overflow-tooltip label="创建时间" align="center" prop='created_at' sortable='custom' width="160"></el-table-column>
      <el-table-column v-if="tableHeader.checked12" show-overflow-tooltip label="更新时间" align="center" prop='updated_at' sortable='custom' width="160"></el-table-column>
    </el-table>

    <el-pagination
      class="pagination"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
			:page-sizes="pageSizes"
      :page-size="Number(pageSize)"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>

    <!-- 上传文件 -->
    <uploadFiles ref="uploadFiles" @refresh='getTableData'></uploadFiles>

    <!-- 查看订单 -->
    <lookOrderDialog ref="lookOrderDialog" @refresh='getTableData'></lookOrderDialog>

    <!-- 新增订单 -->
		<agentOrderOperate ref="agentOrderOperate" @refresh="getTableData"></agentOrderOperate>
  </div>
</template>

<script>
import uploadFiles from './components/uploadFiles'
import lookOrderDialog from './components/lookOrderDialog'
import agentOrderOperate from './components/agentOrder-operate'
import { getMyInfo } from "~/api/user";
import tableSearch from '~/components/tableSearch'
export default {
  data () {
    return {
      tableData: [],
      loading: false,
      pageSize: 25, //一页可以几条
      pageSizes: [25, 50], //一页可以几条,
      currentPage: 1, //目前在第几页
      current_page: 0,
      tableSize: 25, //一页几条
      total: 0,
      sort_params: {},
      paramsByOrder: {
        status: "案件内审中,案件修改中,上报文件上传中"
      },
      baseUrl: global.baseurl,
      tableHeader: {
        checked: true,
        checked1: true,
        checked2: true,
        checked3: true,
        checked4: true,
        checked5: true,
        checked6: true,
        checked7: true,
        checked8: true,
        checked9: true,
        checked10: true,
        checked11: true,
        checked12: true,
      },
      search_params: {},
      selectHead: [
        {
          label: '订单编号',
          props: 'order_number'
        },
        {
          label: '订单状态',
          props: 'status'
        },
        {
          label: '专利类型',
          props: 'type'
        },
        {
          label: '专利名称',
          props: 'patent_name'
        },
        {
          label: '专利权人',
          props: 'patent_user'
        },
        {
          label: '发明人',
          props: 'user_name'
        },
        {
          label: '联络人',
          props: 'liaisons'
        },
        {
          label: '联络人电话',
          props: 'liaisons_tel'
        },
        {
          label: '联络人邮箱',
          props: 'liaisons_email'
        },
        {
          label: '创建时间',
          props: 'time'
        }
      ]
    }
  },
  watch: {
    tableHeader: {
      handler: function(val) {
        let arr = JSON.parse(JSON.stringify(val))
        delete arr.checked
        let select_all = true
        for (let i in arr) {
          if (arr[i] == false) {
            select_all = false
          }
        }
        if (select_all) {
          this.tableHeader.checked = true
        } else {
          this.tableHeader.checked = false
        }
      },
      deep: true
    }
  },
  components:{
    uploadFiles,
    lookOrderDialog,
    agentOrderOperate,
    tableSearch
  },
  created() {
    this.getTableData()
  },
  methods: {
    searchMethods(params, no_search) {
      this.sort_params = {}
      this.currentPage = 1
      this.pageSize = 25
      this.search_params = params
      if (params.time) {
        this.search_params.start_time = params.time[0]
        this.search_params.end_time = params.time[1]
        delete this.search_params.time
      }
      if (!no_search) {
          this.getTableData()
      }
    },
    async getMyinfo () {
      let myInfo = await getMyInfo(this.$axios);
      if (myInfo.data.status == 'success') {
          this.$store.commit("setRoleInfo",myInfo.data.data)
          this.$store.commit("setUser",myInfo.data.data);
      }
    },
    getTableData(age) {
      this.getMyinfo()
      let params = {
        perPage: this.pageSize,
        page: this.currentPage,
        status: "案件内审中,案件修改中,上报文件上传中"
      }
      params = {...params, ...this.sort_params, ...this.search_params}
      this.$axios.get(`api/agent/${this.$store.state.user.id}/order/list`, {params:params}).then( res => {
        if (res.data.code == 200) {
          this.loading = false
          this.getFils(res.data.data)
          this.tableData = res.data.data
          this.pageSize = res.data.page.per_page
          this.total = res.data.page.total
        }
      })
    },
    lookOrder(row) {
      if (window.getSelection().toString() === '') {
        if (row.status == '上报文件上传中') {
          this.$refs.uploadFiles.show(row)
        } else {
          this.$refs.lookOrderDialog.show(row)
        }
      }
    },
    addOrder () {
      this.$refs['agentOrderOperate'].show()
    },
    handleSizeChange (size) {
      this.pageSize = size
      this.currentPage = 1
      // this.paramsByOrder.page = 1
      this.getTableData()
    },
    handleCurrentChange (val) {
      this.currentPage = val
      // this.paramsByOrder.page = 1
      // this.currentPage = 1
      this.getTableData()
    },
    tableSortChange (column) {
      let params = {
          sort_str: column.prop,
      }
      if (column.order == 'ascending') {
          params.sort_order = 'asc'
      } else if (column.order == 'descending') {
          params.sort_order = 'desc'
      } else {
          params = {}
      }
      this.sort_params = params
      this.getTableData()
    },
    getFils (data) {
      for (let i in data) {
        //审核文件 切割数组
        if (
          data[i].review_file == null ||
          data[i].review_file == ""
        ) { } else {
          data[i].reviewfileArr = [];
          let reviewfile = data[i].review_file.split("&");
          for (let j in reviewfile) {
            let itemobj = {
              id: j + 1,
              path: reviewfile[j],
              file: ''
            };
            let itemArr = itemobj.path.split("/")
            itemobj.path = itemArr[itemArr.length - 1]
            itemobj.file = itemArr.slice(0, 2).join("/");
            data[i].reviewfileArr.push(itemobj);
          }
        }
        // // 徒弟审核文件
        // if (
        //   obj.tableData[i].student_review_file == null ||
        //   obj.tableData[i].student_review_file == ""
        // ) { } else {
        //   obj.tableData[i].studentReviewFile = [];
        //   let reviewfile = obj.tableData[i].student_review_file.split("&");
        //   for (let j in reviewfile) {
        //     let itemobj = {
        //       id: j + 1,
        //       path: reviewfile[j],
        //       file: ''
        //     };
        //     let itemArr = itemobj.path.split("/")
        //     itemobj.path = itemArr[itemArr.length - 1]
        //     itemobj.file = itemArr.slice(0, 2).join("/");
        //     obj.tableData[i].studentReviewFile.push(itemobj);
        //   }
        // }

        // //已完成文件 切分组件
        // if (
        //   obj.tableData[i].fish_file == null ||
        //   obj.tableData[i].fish_file == ""
        // ) { } else {
        //   obj.tableData[i].fishfileArr = [];
        //   let fishfile_Arr = obj.tableData[i].fish_file.split("&");
        //   for (let f in fishfile_Arr) {
        //     let itemobj = {
        //       id: f + 1,
        //       path: fishfile_Arr[f],
        //       file: ''
        //     };
        //     let itemArr = itemobj.path.split("/")
        //     itemobj.path = itemArr[itemArr.length - 1]
        //     itemobj.file = itemArr.slice(0, 2).join("/");
        //     obj.tableData[i].fishfileArr.push(itemobj);
        //   }
        // }

      }
    },
    stopLook(path) {
    },
    selectAll(val) {
      for( let i in this.tableHeader) {
        this.tableHeader[i] = val
      }
    },
  }
}
</script>

<style lang='less' type='text/css'>
  .agentOrder {
    .file_sh {
      font-size: 25px;
      margin-right: 10px;
    }
    // .el-popover  {
    //   .el-checkbox {
    //     display: block;
    //   }
    // }
  }
</style>
